<template>
  <div class="app-container">
    <div class="tab_container">
      <el-tabs v-model="activeTabsName" class="demo-tabs" @tab-click="clickTabs">
        <el-tab-pane
          v-for="tab in tabs"
          :key="tab.name"
          :label="tab.label"
          :name="tab.name"
        >
          {{ tab.name }}
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>

<script setup>
import backTable from "./components/backTable";
import borrowTable from "./components/borrowTable";
const activeTabsName = ref("borrow");

const tabs = [
  { id: 0, name: "borrow", label: "借用", component: markRaw(borrowTable) },
  { id: 1, name: "back", label: "归还", component: markRaw(backTable) },
];

const clickTabs = (tab) => {
  activeTabsName.value = tab.paneName;
};
</script>

<style lang="scss" scoped>
.app-container {
  background: #fff;
  .tab_container {
    margin: 0 20px;
    height: 100%;
    width: calc(100% - 40px);
    // background: rebeccapurple;
    position: relative;
    .el-tabs {
      height: 100%;
      width: 100%;
      // position: absolute;
      display: flex;
      flex-direction: column;
      :deep(.el-tabs__content) {
        flex: 1;
      }
      :deep(.el-tab-pane) {
        height: 100%;
      }
    }
  }
  .demo-tabs > .el-tabs__content {
    padding: 32px;
    color: #6b778c;
    font-size: 32px;
    font-weight: 600;
  }
}
</style>
